{% extends 'base.html' %}

{% block content %}
<style type="text/css">
  .form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
  }
  .form-signin .checkbox {
    font-weight: 400;
  }
  .form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .h3{
    text-align: center;
  }
</style>


<form id="id_password_change_form" method="POST" class="form-signin">{% csrf_token %}
  <h1 class="h3 mb-3 font-weight-normal">Change password</h1>
    <input name="old_password" class="form-control" placeholder="Old password" type="password" id="id_old_password" required="true">
    <input name="new_password1" class="form-control" placeholder="New password" type="password" id="id_new_password1" required="true">
    <input name="new_password2" class="form-control" placeholder="Confirm password" type="password" id="id_new_password2" required="true">

    {% for field in form %}
      {% for error in field.errors %}
        <p style="color: red">{{ error }}</p>
      {% endfor %}
    {% endfor %}

  <button id="id_submit_btn" class="btn btn-lg btn-primary btn-block" type="submit">Update</button>  
</form>


{% endblock %}